<template>
  <div class="tab">
    <cube-tab-bar
      :useTransition="false"
      :showSlider="true"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px"
    >
    </cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide
        :loop="false"
        :auto-play="false"
        :show-dots="false"
        :initial-index="index"
        ref="slide"
        :options="slideOptions"
        @scroll="onScroll"
        @change="onChange"
      >
        <cube-slide-item v-for="(tab, index) in tabs" :key="index">
          <component ref="component" :is="tab.component" :data="tab.data">
          </component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
import Goods from 'views/goods/goods'
import Ratings from 'views/ratings/ratings'
import Seller from 'views/seller/seller'
import { mapState } from 'vuex'

export default {
  name: 'tab',
  props: {
    initialIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      index: this.initialIndex,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0,
      },
    }
  },
  computed: {
    ...mapState(['seller']),
    tabs() {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller,
          },
        },
        {
          label: '评论',
          component: Ratings,
          data: {
            seller: this.seller,
          },
        },
        {
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller,
          },
        },
      ]
    },
    selectedLabel: {
      get() {
        return this.tabs[this.index].label
      },
      set(newVal) {
        this.index = this.tabs.findIndex((item) => item.label === newVal)
      },
    },
  },
  mounted() {
    this.onChange(this.index)
  },
  created() {
    this.timer = null
  },
  methods: {
    onScroll(pos) {
      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        const tabBarwidth = this.$refs.tabBar.clientWidth
        // console.log(this.$refs.tabBar, this.$refs.slide)
        const slideWidth = this.$refs.slide.slide.scrollerWidth
        const transform = (-pos.x / slideWidth) * tabBarwidth

        this.$refs.tabBar.setSliderTransform(transform)
        clearTimeout(this.timer)
        this.timer = null
      }, 0)
    },
    onChange(current) {
      this.$nextTick(() => {
        this.index = current
      })
      const instance = this.$refs.component[current]
      if (instance && instance.fetch) {
        instance.fetch()
      }
    },
  },
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixin.stylus';

.tab {
  position: fixed;
  top: 138px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  >>> .cube-tab {
    padding: 10px 0;
  }

  .slide-wrapper {
    flex: 1;
    overflow: hidden;

    // 此元素上限定了高度只有在此 使用 overflow: hidden，纵向超出视图区域的内容才会被隐藏
    >>> .cube-slide-item {
      overflow: hidden;
      // 此元素上限定了宽度只有在此 使用 overflow: hidden，横向超出视图区域的内容才会被隐藏
    }
  }
}
</style>
